<style scoped="scoped">
  .pick-list-content {
    width: 100%;
    min-height: 200px;
    border: 1px solid #999;
  }
  .pick-content-title {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 49px;
    border-bottom: 1px solid #999;
  }
  .pick-content-service {
    padding: 5px 10px;
    line-height: 30px;
    border-bottom: 1px solid #999;
  }
  .content-service {
    width: 100%;
  }
  .pick-content-table th,.pick-content-table td {
    text-align: center;
    border: 1px solid #999;
    border-collapse:collapse;
  }
  .pick-list-footer {
    width: 100%;
    padding: 5px 10px;
    line-height: 30px;
    border-top: 1px solid #999;
  }
</style>
<template>
 <div>
   <el-dialog
     title="打印"
     width="900px"
     :visible.sync="showModal"
   >
     <div class="pick-list-content-box" v-for="(item, index) in orderDatas" :key="index" v-show="index<1">
       <div class="pick-list-content" style="width: 100%;border: 1px solid #999;">
         <div class="pick-content-title"
              style="width: 100%;height: 50px;text-align: center;font-size: 18px;font-weight: 600;line-height: 49px;border-bottom: 1px solid #999;">
           {{item.companyName}}出库拣货单
         </div>
         <div class="pick-content-service" style="padding: 5px 7px;line-height: 30px;border-bottom: 1px solid #999;">
           <table class="content-service" style="width: 100%;">
             <tr>
               <td width="30%">出库单号:{{item.warehouseNo}}</td>
               <td width="28%">拣货单号:{{item.code}}</td>
               <td width="27%">商家名称:{{item.cargoOwner}}</td>
               <td width="15%">出库仓:{{item.warehouse}}</td>
             </tr>
             <tr>
               <td>用户姓名:{{item.chOrderConsigneeInfo.consigneName}}</td>
               <td>用户电话:{{item.chOrderConsigneeInfo.consignePhone}}</td>
               <td colspan="2">用户地址:{{item.chOrderConsigneeInfo.consigneProvince}} {{item.chOrderConsigneeInfo.consigneCity}} {{item.chOrderConsigneeInfo.consigneDistrict}} {{item.chOrderConsigneeInfo.consigneAddress}}</td>
             </tr>
           </table>
         </div>
         <div class="pick-content-service" style="padding: 5px 7px;line-height: 30px;">
           <table class="content-service" style="width: 100%;">
             <tr>
               <td width="25%">总体积:{{item.totleVolume}} m³</td>
               <td width="28%">总重量:{{item.totleWeight}} kg</td>
               <td width="22%">总包件:{{item.totolePackageNum}} 件</td>
               <td width="25%"></td>
             </tr>
           </table>
           <table class="pick-content-table" style="width: 100%;border-collapse:collapse">
             <thead>
             <tr>
               <th :style="tableOne1"><span style="padding: 0px 5px">#</span></th>
               <th :style="tableOne1" width="40px">
                 <div style="width: 40px">厂家名称</div>
               </th>
               <th :style="tableOne1" width="140px">所属产品</th>
               <th :style="tableOne1" width="80px">包件编号</th>
               <th :style="tableOne1" width="140px">包件名称</th>
               <th :style="tableOne1">规格</th>
               <th :style="tableOne1">颜色</th>
               <th :style="tableOne1">风格</th>
               <th :style="tableOne1" width="40px">总体积/m³</th>
               <th :style="tableOne1" width="40px">包件/件</th>
               <th :style="tableOne1" width="90px">库位</th>
             </tr>
             </thead>
             <tbody>
             <tr v-for="(p, pIndex) in item.printGoodsInfoBeanList" :key="pIndex">
               <td :style="tableOne1">{{pIndex + 1}}</td>
               <td :style="tableOne1">{{p.manufacturersName}}</td>
               <td :style="tableOne1">{{p.productName}}</td>
               <td :style="tableOne1">{{p.code}}</td>
               <td :style="tableOne1">{{p.name}}</td>
               <td :style="tableOne1">{{p.standard}}</td>
               <td :style="tableOne1">{{p.color}}</td>
               <td :style="tableOne1">{{p.style}}</td>
               <td :style="tableOne1">{{p.volume}}</td>
               <td :style="tableOne1">{{p.planNum}}</td>
               <td :style="tableOne1">{{p.position}}</td>
             </tr>
             </tbody>
           </table>
         </div>
         <div class="pick-content-service" style="padding: 5px 7px;line-height: 30px;border-top: 1px solid #999;">
           <table class="content-service" style="width: 100%;">
             <tr>
               <td width="30%">出库拣货员:{{item.sortingPersonName}}</td>
               <td width="28%">分配人:{{item.distributePersonName}}</td>
               <td width="27%">分配时间:{{item.distributeTime | unixTimestampFilter('YYYY-MM-DD HH:mm')}}</td>
               <td width="15%"></td>
             </tr>
             <tr>
               <td colspan="2" width="40%">订单备注:{{item.memo}}</td>
               <td colspan="2" width="40%">出库拣货员签字:</td>
             </tr>
           </table>
         </div>
         <div class="pick-list-footer-box" v-show="false">
           <div class="pick-list-footer" style="padding: 5px 7px;line-height: 30px;border-top: 1px solid #999;">
             <table style="width: 100%">
               <tr>
                 <td width="25%">打印账号:{{user}}</td>
                 <td width="28%">打印时间:{{printTime}}</td>
                 <td width="22%">&nbsp;</td>
                 <td width="25%" style="text-align: right;">
                   <!--插件内部属性tdata='pageNO'   tdata='pageCount'-->
                   <span tdata='pageNO'>第##页</span> <span tdata='pageCount'>共##页</span>
                 </td>
               </tr>
             </table>
           </div>
         </div>
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="print()">打 印</el-button>
  </span>
   </el-dialog>
 </div>
</template>

<script>
import {getLodop, validateLODOP} from '@/utils'
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import moment from 'moment'
import {getUserInfo} from '@/utils/auth.js'
let LODOP = null
export default {
  name: 'PrintModal',
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  props: {
    sortingId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      printTime: moment().format('YYYY-MM-DD HH:mm'),
      user: getUserInfo('name'),
      showModal: false,
      orderDatas: [],
      tableOne1: 'text-align: center;border: 1px solid #999;font-size:15px;padding: 1px;line-height: 20px'
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  methods: {
    show() {
      this.showModal = true
      this.$nextTick(_ => {
        this.getDetail()
      })
    },
    hide() {
      this.showModal = false
    },
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/outWarehose/fingPrintOutWarehouse', {outWareouseId: this.sortingId}).then(response => {
        if (!response.success) {
          return
        }
        let arr = [] // 先设计成批量
        arr.push(response.data)
        this.orderDatas = arr
      })
    },
    print() {
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.pick-list-content-box').each((index, v) => {
          let footer = $(v).find('.pick-list-footer-box').html()
          // LODOP.SET_PRINT_PAGESIZE(1, 2180, 1400, 'A4')
          LODOP.ADD_PRINT_HTM('0.5mm', '1mm', '201mm', '290mm', v.innerHTML)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          LODOP.ADD_PRINT_HTM('190mm', 1, '203mm', '30mm', footer)
          LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
      }
    }
  }
}
</script>
